<template>
<div>
    <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
  <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
  <template #pulling="props">
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
      :style="{ transform: `scale(${props.distance / 80})` }"
    />
  </template>

  <!-- 释放提示 -->
  <template #loosing>
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
    />
  </template>

  <!-- 加载提示 -->
  <template #loading>
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"
    />
  </template>
  <p>刷新次数: {{ count }}</p>
</van-pull-refresh>

    <!-- <TabBar :index="3"></TabBar> -->
     <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/classlsy">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="cart">购物车</van-tabbar-item>
      <van-tabbar-item
        icon="friends-o
"
        to="my"
        >我的</van-tabbar-item
      >
    </van-tabbar>
</div>
</template>
<script setup>
// import TabBar from '../tabbar/index.vue'
import { ref } from 'vue';
const active = ref(3);

// import { showToast } from 'vant';
// const count = ref(0);
//     const loading = ref(false);
//     const onRefresh = () => {
//       setTimeout(() => {
//         showToast('刷新成功');
//         loading.value = false;
//         count.value++;
//       }, 1000);
//     };
//     count,
//       loading,
//       onRefresh
</script>
<style lang="scss">
 .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
</style>